//入口文件
//导入vue组件
import Vue from 'vue';
//导入路由包
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//导入vue-resource
import VueResource from 'vue-resource';
Vue.use(VueResource);
//设置请求根路径 注意：要写在安装VueResource之后
Vue.http.options.root = 'http://localhost:8080';
//全局设置post请求 提交数据为表单格式 application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true;
//导入router.js模块
import router from './router.js';
//导入App组件
import app from './App.vue';
//按需导入MintUI组件
//导入顶部导航栏 轮播图
import { Button,Header,Swipe,SwipeItem,Switch } from 'mint-ui';
Vue.component(Button.name,Button);
Vue.component(Header.name,Header);
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Switch.name, Switch);

//导入vuex
import Vuex from 'vuex';
Vue.use(Vuex);
//获取本地存储的数据
var car = JSON.parse(localStorage.getItem('car') || '[]')
//创建仓储
let store = new Vuex.Store({
    state: {    //this.$store.state.***
        car: car      //购物车商品数据    {id: '',count: '数量',price: '价格',selected: '是否选中默认false'}
    },
    mutations: {    //this.$store.commit('方法名称','参数')
        addGoodsToCar (state,goods) {
            //如果购物车中不存在此商品则新增，如果购物车中存在此商品则只更新数量
            var flag = false    //标识符
            state.car.some(item => {
                if (item.id === goods.id) {
                    item.count += parseInt(goods.count)
                    flag = true
                    //终止循环
                    return true
                }
            })
            if (!flag) {
                state.car.push(goods)
            }

            //当更新car之后将数据保存到localStorage中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateShopCarWithGoods(state,goods) {
            //修改购物车中商品的数量值

            state.car.some(item => {
                if (item.id == goods.id) {
                    item.count = parseInt(goods.count)
                    return true
                }
            })

            //把最新结果保存到本地存储中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        removeFormCar(state,id) {
            //根据id 在购物车中删除对应的商品
            state.car.some((item, i) => {
                if (item.id == id) {
                    state.car.splice(i, 1)
                    return true
                }
            })
            //把最新结果保存到本地存储中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateShopCarWithGoodsSelected(state,info) {
            //根据id 在购物车中删除对应的商品
            state.car.some(item => {
                if (item.id == info.id) {
                    item.selected = info.selected
                    return true
                }
            })
            //把最新结果保存到本地存储中
            localStorage.setItem('car',JSON.stringify(state.car))
        }
        
    },
    getters: {      //this.$store.getters.***
        //相当于计算属性 也相当与过滤器
        getAllCount(state) {
            var count = 0
            state.car.forEach(item => {
                count += item.count
            })
            
            return count
        },
        getGoodsCount(state) {
            var o = {}
            state.car.forEach(item => {
                //将每一个商品的id作为o对象的key，将每一个商品的count作为o对象的value
                o[item.id] = item.count
            })
            return o
        },
        getGoodsSelected(state) {
            var o = {}
            state.car.forEach(item => {
                //将每一个商品的id作为o对象的key，将每一个商品的count作为o对象的value
                o[item.id] = item.selected
            })
            return o
        },
        getGoodsCountAndAmount(state) {
            var o = {
                count: 0,   //勾选的数量
                amount: 0   //勾选的总价格
            }
            
            //遍历累加选中的商品
            state.car.forEach(item => {
                if (item.selected) {
                    o.count += item.count
                    o.amount += item.price * item.count
                }
            })

            return o
        }
    }
});


//导入时间插件
import moment from 'moment';

//导入MUI样式
import './lib/mui/css/mui.css';
//导入MUI扩展图标样式表
import './lib/mui/css/icons-extra.css';
//引入矢量图标
import './css/iconfont.css';

//定义全局过滤器
Vue.filter('dateFormat',function(dataStr,pattern='YYYY-MM-DD HH:mm:ss'){
    return moment(dataStr).format(pattern);
});


//实例Vue对象
var vm  = new Vue({
    el: '#app',
    render: c => c(app),
    router,
    store   //挂载store状态管理对象
});


